<template>
  <view class="page">
    <view class="p-body">
      <u-image
        show-loading
        :show-menu-by-longpress="false"
        :src="require('@/static/mall/success.png')"
        width="120rpx"
        height="120rpx"
      />
      <u-text text="支付成功" color="#222222" size="40rpx" bold align="center" />
      <u-text
        text="订单已完成支付，感谢您的购买"
        color="#BABABA"
        size="28rpx"
        align="center"
        line-height="80rpx"
      />
      <view class="p-btn" @click="handleTo">查看订单详情</view>
    </view>
  </view>
</template>

<script>
import { myRefreshInfo } from "@/request/myApi.js";
export default {
  data() {
    return {
      orderId: "", // 订单ID
      orderType: 1, // 订单类型
    };
  },
  onLoad(e) {
    this.orderId = e.id;
    this.orderType = e.type;
    this.handleRefresh();
  },
  methods: {
    // 跳转订单详情
    handleTo() {
      if (this.orderId.indexOf(",") != -1) {
        uni.redirectTo({ url: `pages/my/myOrder` });
      } else {
        if (this.orderType == "shop") {
          uni.redirectTo({ url: `/pages/my/myOrderDetail?id=${this.orderId}` });
        } else {
          uni.redirectTo({ url: `/pages/my/myOrderCode?id=${this.orderId}` });
        }
      }
    },
    // 更新用户信息
    handleRefresh() {
      myRefreshInfo().then((res) => {
        if (res.code == 1) {
          let info = res.data.userinfo;
          let oinfo = this.$getStorage("USER_INFO");
          if (oinfo.isPlus) {
            oinfo.virtual_coin = info.virtual_coin;
            uni.setStorageSync("USER_INFO", JSON.stringify(oinfo));
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 20rpx;
  .p-body {
    height: 580rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 220rpx;
    .p-btn {
      width: 376rpx;
      height: 88rpx;
      margin-top: 60rpx;
      line-height: 88rpx;
      background-color: #fff;
      border: 1rpx solid $active-color;
      border-radius: 120rpx;
      text-align: center;
      font-size: 28rpx;
      color: $active-color;
      &:active {
        background-color: #f9fffe;
      }
    }
  }
}
</style>
